<template>

  <div>
    <div>
      <div style="margin: 50px 0 ;text-align: center;font-size: 20px">
        Register
      </div>
      <div>
        <div  class="show-min-576px">


<!--          <div style="margin: 10px 0;">-->
<!--            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">-->
<!--              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">-->
<!--                 UserName-->
<!--              </span>-->
<!--              <span style="flex: 1 1 auto">-->
<!--                <basic-input size="big" style="box-sizing: border-box;max-width: 100%;height: 40px;" type="password" v-model="registerInfo.code"/>-->
<!--              </span>-->
<!--              <basic-button :inverse-color="true">-->
<!--                <span style="white-space:nowrap;" @click="toSendCode">Send Code</span>-->
<!--              </basic-button>-->
<!--            </div>-->
<!--          </div>-->

          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: 100%;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                <MailOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;width: 100%;height: 40px;" v-model="registerInfo.mail"  placeholder="Please input your email"/>
              </span>
            </div>
          </div>
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 24px;height: 24px;margin-right:10px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <LockOutlined style="font-size: 24px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input size="big" style="box-sizing: border-box;max-width: 100%;height: 40px;" type="password" v-model="registerInfo.password"  placeholder="Please input password"/>
              </span>
            </div>
          </div>
        </div>
        <div class="show-max-576px">
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: 100%;">
              <span style="width: 34px!important;height: 24px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                <MailOutlined style="font-size: 20px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input  style="box-sizing: border-box;width: 100%;" v-model="registerInfo.mail" placeholder="Please input your email" />
              </span>
            </div>
          </div>
<!--          <div style="margin: 10px 0;">-->
<!--            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">-->
<!--              <span style="width: 34px!important;height: 24px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">-->
<!--                 <SafetyCertificateOutlined style="font-size: 20px"/>-->
<!--              </span>-->
<!--              <div  style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: 1 1 calc(100% - 34px);">-->
<!--              <span style="flex: 1 1 auto">-->
<!--                <basic-input style="box-sizing: border-box;max-width: 100%;" type="password" v-model="registerInfo.code"/>-->
<!--              </span>-->
<!--                <basic-button :inverse-color="true" style="height:36px;">-->
<!--                  <span style="white-space:nowrap;" @click="toSendCode">Send Code</span>-->
<!--                </basic-button>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <div style="margin: 10px 0;">
            <div style="display: flex;flex-wrap: nowrap;align-content: center;justify-content: space-around;align-items: center;flex: auto;">
              <span style="width: 34px;height: 24px;display: flex;flex-direction: column;flex-wrap: nowrap;align-content: center;justify-content: center;align-items: center;">
                 <LockOutlined style="font-size: 20px"/>
              </span>
              <span style="flex: 1 1 auto">
                <basic-input style="box-sizing: border-box;max-width: 100%;" type="password" v-model="registerInfo.password" placeholder="Please input password"/>
              </span>
            </div>
          </div>
        </div>
      </div>
      <basic-button @click="toRegister" style="box-sizing: border-box;width: 100%" :inverse-color="true">
        <div style="text-align: center;font-size: 16px;">
          Register
        </div>
      </basic-button>
      <basic-button @click="toRoute('/auth/login')" style="box-sizing: border-box;width: 100%;border: 1px solid #1677ff ;margin-top: 10px" >
        <div style="text-align: center;font-size: 16px;">
          Already registered？
        </div>
      </basic-button>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ArrowRightOutlined, LockOutlined, MailOutlined, UserOutlined,SafetyCertificateOutlined} from "@ant-design/icons-vue";
import {login, register, sendRegisterMail} from "../../api/UserActionRequest";
import {searchCart} from "../../api/CartRequest";
import {notification} from "ant-design-vue";
import BasicButton from "../../components/button/basicButton.vue";

export default defineComponent({
  components: {
    BasicButton,
    MailOutlined, LockOutlined, UserOutlined, ArrowRightOutlined,SafetyCertificateOutlined
  },
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();


    const registerInfo = reactive({
      mail: '',
      password: '',
      code:''
    })

    const toRegister = () => {
      register(registerInfo).then(async (res) => {
        notification.success({message:'Registration success'})
        toRoute('/auth');
      }).catch((res)=>{
        notification.warning(res.data)
      })
    }

    const toSendCode=()=>{
      sendRegisterMail(registerInfo.mail).then((res)=>{
        notification.success({message:'Send Successfully'})
      }).catch((res)=>{
        notification.warning(res.data)
      })
    }

    const toRoute = (path: string) => {
      router.push({
        path
      })
    }

    return {
      toRegister,
      registerInfo,
      toSendCode,
      toRoute
    }
  }
})
</script>

<style scoped lang="less">
.show-min-576px{
  @media screen and (max-width: 576px){
    display: none!important;
  }
}
.show-max-576px{
  @media screen and (min-width: 577px){
    display: none!important;
  }
}
</style>
